<template>
  <el-card>
    <el-table border style="margin: 20px 0px" :data="skuArr">
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column label="SKU名称" prop="skuName"></el-table-column>
      <el-table-column label="默认图片">
        <template #="{ row }">
          <el-image :src="row.skuDefaultImg" alt="图片无法显示"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="SKU描述" prop="skuDesc"></el-table-column>
      <el-table-column label="重量(g)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" fixed="right" width="250px">
        <template #="{ row }">
          <el-button
            :type="row.isSale == 1 ? 'info' : 'primary'"
            :icon="row.isSale == 1 ? 'Bottom' : 'Top'"
            size="small"
            @click="changeSale(row)"
          ></el-button>
          <el-button
            type="warning"
            icon="Edit"
            size="small"
            @click="editSku"
          ></el-button>
          <el-button
            type="info"
            icon="View"
            size="small"
            @click="showSkuInfo"
          ></el-button>
          <el-popconfirm
            :title="`你确定要删除${row.skuName}?`"
            width="300px"
            @confirm="confirm(row)"
          >
            <template #reference>
              <el-button type="danger" icon="Delete" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="limit"
      :page-sizes="[3, 5, 7, 9]"
      size="large"
      :background="true"
      layout="total,prev, pager, next, jumper, -> , sizes, total"
      :total="total"
      @current-change="getSkuList"
      @size-change="handler"
    />
    <el-drawer v-model="drawer">
      <template #header>
        <h4>SKU详情(此为静态页面)</h4>
      </template>
      <template #default style="margin: 5px 0px">
        <el-row>
          <el-col :span="8">名称</el-col>
          <el-col :span="16">华为</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">描述</el-col>
          <el-col :span="16">华为YYDS</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">价格</el-col>
          <el-col :span="16">8000</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">平台属性</el-col>
          <el-col :span="16">
            <el-tag v-for="item in 10" :key="item" style="margin: 5px">{{
              item
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">销售属性</el-col>
          <el-col :span="16">
            <el-tag v-for="item in 5" :key="item" style="margin: 5px">{{
              item
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">商品图片</el-col>
          <el-col :span="16">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="item in 6" :key="item">
                <h3 text="2xl" justify="center">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
      <template #footer> </template>
    </el-drawer>
  </el-card>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import {
    reqSkuListByPage,
    reqOnSaleSKU,
    reqCancelSaleSKU,
    reqRemoveSku,
  } from '@/api/product/sku'
  import type { SkuData } from '@/api/product/sku/type'
  import { ElMessage } from 'element-plus'

  let pageNo = ref<number>(1)
  let limit = ref<number>(3)
  let total = ref<number>(100)
  let skuArr = ref<SkuData[]>([])

  let drawer = ref<boolean>(false) //控制抽屉的显示与隐藏

  onMounted(() => {
    getSkuList()
  })

  const getSkuList = async (pager = 1) => {
    pageNo.value = pager
    let result = await reqSkuListByPage(pageNo.value, limit.value)
    if (result.code === 200) {
      skuArr.value = result.data.records
      total.value = result.data.total
    } else {
      ElMessage({
        type: 'error',
        message: '获取SKU列表失败',
      })
    }
  }

  const handler = () => {
    getSkuList()
  }

  const changeSale = async (row: SkuData) => {
    if (row.isSale == 1) {
      await reqCancelSaleSKU(row.id as number)
      ElMessage({ type: 'success', message: '下架成功' })
      getSkuList(pageNo.value)
    } else {
      await reqOnSaleSKU(row.id as number)
      ElMessage({ type: 'success', message: '上架成功' })
      getSkuList(pageNo.value)
    }
  }

  const editSku = () => {
    ElMessage({ type: 'info', message: '程序员正在努力开发中......' })
  }

  const showSkuInfo = () => {
    drawer.value = true
  }

  const confirm = async (row: SkuData) => {
    let result = await reqRemoveSku(row.id as number)
    if (result.code === 200) {
      ElMessage({ type: 'success', message: '删除成功' })
      getSkuList(skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
      ElMessage({ type: 'error', message: '删除失败' })
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
</style>
